<template>
  <el-dialog title="编辑用户" :close-on-click-modal="false" :visible.sync="showEditUserDialog">
    <el-form ref="editUserForm" :model="editUserForm" label-width="80px">
        <el-form-item label="用户名" prop="name">
            <el-input v-model="editUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
            <el-input v-model="editUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
            <!-- props可以设置数据的lable和value为自定义属性 -->
           <el-cascader
            style="width: 100%;"
            :props="{value: 'id', label: 'name'}"
            v-model="editUserForm.depts"
            :options="depts"></el-cascader>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
            <el-select v-model="editUserForm.roles" style="width: 100%;" multiple>
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.remark"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="showEditUserDialog = false">取 消</el-button>
        <el-button type="primary" :loading="sureBtnLoading" @click="sureEdit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import http from '@/utils/request'

export default {
    props: ['depts', 'roles', 'editUserForm'],
    data() {
        return {
            sureBtnLoading: false,
            showEditUserDialog: false
        }
    },
    methods: {
        sureEdit() {
            this.sureBtnLoading = true  // 让按钮禁止点击
            let department = this.editUserForm.depts[this.editUserForm.depts.length - 1]
            http.put(`/sys-user/e/${this.editUserForm.id}`, {
                       ...this.editUserForm, 
                       department: department
                   }).then(() => {
                        this.sureBtnLoading = false
                        this.showEditUserDialog = false
                        this.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                        this.resetForm()
                        this.$emit('refresh')
                   })
        },
        resetForm() {
            this.editUserForm.name = ''
            this.editUserForm.mobile = ''
            this.editUserForm.email = ''
            this.editUserForm.depts = ''
            this.editUserForm.roles = ''
        }
    }
}
</script>

<style>

</style>